<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=720">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <title></title>
    <link rel="stylesheet" href="css/data.css" />
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/mobile-util.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/base.js"></script>
</head>
<style type="text/css">
    body {
        width: 100%;
        height: 100%;
    }
#savechan{
    font-size: 0.4rem;
    color: #333333;
}
    .container {
        overflow: auto;
        clear: both;
        margin:0 auto;
    }

    .z_photo {

        /*padding: 0.3rem;*/
        overflow: auto;
        clear: both;
        margin: 1rem auto;
        border: 1px solid #555;
    }

    .z_photo img {
        width: 1rem;
        height: 1rem;
        margin-bottom: 0.1rem;
    }

    .z_addImg {
        float: left;
        margin-right: 0.2rem;
    }

    .z_file {
        width: 5rem;
        height: 0;
        /*background: url(./images/head_pic.png) no-repeat;*/
        background: url(z_add.png) no-repeat;
        background-size: 100% 100%;
        float: left;
        margin-right: 0.2rem;
    }
    #file{
        width: 5rem;
        height: 5rem;
        display:none;
        outline:none;
        border:none;
    }
    .z_file input::-webkit-file-upload-button {
        width: 1rem;
        height: 1rem;
        border: none;
        position: absolute;
        outline: 0;
        opacity: 0;
    }

    .z_file input#file {
        width: 50px;
        height: 0;
        opacity: 0;
        display: block;
        border: 0;
        vertical-align: middle;
    }
    /*遮罩层*/

    .z_mask {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .5);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: none;
    }

    .z_alert {
        width: 19rem;
        height: 4rem;
        border-radius: .2rem;
        background: #fff;
        font-size: .24rem;
        text-align: center;
        position: absolute;
        left: 33%;
        top: 50%;
        margin-left: -1.5rem;
        margin-top: -2rem;
    }

    .z_alert p:nth-child(1) {
        line-height: 1.5rem;
    }

    .z_alert p:nth-child(2) span {
        display: inline-block;
        width: 49%;
        height: .5rem;
        line-height: .5rem;
        float: left;
        border-top: 1px solid #ddd;
    }

    .z_cancel {
        border-right: 1px solid #ddd;
    }


</style>
<body>
<div class="warp">
    <div class="warp_cen">
        <img src="images/sys_back.png" onclick="backpng()"/>
        <h2>我的资料</h2>
        <span id="savechan" onclick="save()">保存</span>
    </div>
</div>
<div class="head">
    <div class="head_cen">
        <div class="head_left">
            设置头像
        </div>
        <div class="head_right">
            <h2></h2>
            <div class="container">
                <!--    照片添加    -->
                <div class="z_photo" id="photoUpload">
                    <div class="z_file" >
                        <!-- <input type="file"  name="file" id="file" value="" accept="image/*" multiple onchange="imgChange('z_photo','z_file') ;"  /> -->
                        <input type="file" id="file" onchange="mychange()" accept="image/*" multiple/>
                       <!-- <img alt="" src="" id = "photo">-->
                    </div>

                </div>
                <!--遮罩层-->
               <!--  <div class="z_mask">
                    弹出框
                    <div class="z_alert">
                        <p>确定要删除这张图片吗？</p>
                        <p>
                            <span class="z_cancel">取消</span>
                            <span class="z_sure">确定</span>
                        </p>
                    </div>
                </div> -->
            </div>
            <img src="images/cont_icon_right.png"/>
        </div>
    </div>
</div>
<div class="name name_1">
    <div class="name_cen">
        <div class="name_left">
            <h2>昵称</h2>
            <input id = "userName" class="name_left1" type="text" placeholder="请输入您的昵称"/>
        </div>
        <div class="name_img">
            <img src="images/white.png" alt="" />
        </div>
    </div>
</div>
<div class="name">
    <div class="name_cen">
        <div class="name_right">
            <h2 id="role">育儿期</h2>
            <input id = "chanjain_data" type="text" placeholder="请输入您的预产期" readonly/>
        </div>
        <div class="name_img">
            <img src="images/white.png" alt="" onclick="editor()"/>
        </div>
    </div>
</div>
<div class="name name_1">
    <div class="name_cen">
        <div class="name_left">
            <h2>姓名</h2>
            <input id = "realName" class="name_left1" type="text" placeholder="请输入您的姓名"/>
        </div>
        <div class="name_img">
            <img src="images/white.png" alt=""/>
        </div>
    </div>
</div>
<div class="name">
    <div class="name_cen">
        <div class="name_left">
            <h2>年龄</h2>
            <input id = "age" type="text" placeholder="请输入您的年龄"/>
        </div>
        <div class="name_img">
            <img src="images/white.png" alt=""/>
        </div>
    </div>
</div>
<div class="name name_1">
    <div class="name_cen">
        <div class="name_right">
            <h2>联系方式</h2>
            <input id = "phone" class="name_left1" type="text" placeholder="请输入联系方式"/>
        </div>
        <div class="name_img">
            <img src="images/white.png" alt=""/>
        </div>
    </div>
</div>
<div class="name">
    <div class="name_cen">
        <div class="name_left">
            <h2>联系地址</h2>
            <input id = "address" type="text" placeholder="请输入您的地址"/>
        </div>
        <div class="name_img">
            <img src="images/white.png" alt=""/>
        </div>
    </div>
</div>
</body>
</html>
